<template>
	<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback">
	
	<view class="container">

		<view class="top">
			<view class="calendar">
				<image src="../../../static/images/calendar.png"></image>
			</view>
			<view class="date" @click="dateShow=true">{{startDate?startDate:'请选择日期'}}</view>
			<view class="mid">至</view>
			<view class="date" @click="dateShow=true">{{endDate?endDate:'请选择日期'}}</view>

		</view>

		<view class="tabs">

			<u-dropdown active-color="#64AEFF">
				<u-dropdown-item v-model="value1" :title="book_title" :options="options1"  @change="change1"></u-dropdown-item>
				<u-dropdown-item v-model="type" :title="type_title" :options="options2" @change="change2"></u-dropdown-item>
				<u-dropdown-item v-model="status" :title="status_title" :options="options3"
					@change="change3"></u-dropdown-item>
			</u-dropdown>

		</view>

		<view class="lists">
			<view class="item" v-for="(item,index) in list.data" @click="toResult(item)">
				<view class="info">
					<view class="left">
						<view class="label1">
							<text class="col-98">词汇本：</text>{{item.book_name}}({{item.start_num}}-{{item.end_num}})
						</view>
						<view class="label">
							<text class="col-98">学生名称：</text>{{item.name}}
						</view class="label">
						<view class="label">
							<text class="col-98">抽查个数：</text>{{item.choose_num}}
						</view>

					</view>

					<view class="right">
						<view class="status" v-if="item.status==1">
							{{item.status_text}}
						</view>
						<view class="status-fail" v-if="item.status==2">
							{{item.status_text}}
						</view>

					</view>
				</view>
				<view class="dis-flex" style="justify-content: space-between;">
					<view class="label"><text class="col-98">抽查形式：</text>{{item.type_text}}</view>
					<view class="label" style="padding-right: 20rpx;"><text class="col-98">抽查时间：</text>{{item.create_time}}
					</view>
				</view>

			</view>

		</view>


		<u-calendar v-model="dateShow" :mode="mode" @change="changeDate"></u-calendar>

	</view>
	  </mescroll-body>
</template>

<script>
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
	import * as PaperApi from '@/api/ant/paper'
	import * as BookApi from '@/api/ant/book'
	import {
		getEmptyPaginateObj,
		getMoreListData
	} from '@/core/app'

  const pageSize = 15
  const showViewKey = 'GoodsList-ShowView';

	export default {
		components: {
			MescrollBody
		},
		mixins: [MescrollMixin],
		data() {
			return {
				keyword:'',
				bookId:0,
				type:0,
				id: 0,
				duration: 10,
				content: '请填写听到的英文',
				book_title:'词汇本',
				type_title:'抽查形式',
				status_title: '考试通过情况',
				percent: 100,
				num: 1,
				status: 0,
				startDate: '',
				endDate: '',
				mode: 'range',
				dateShow: false,
				 list: getEmptyPaginateObj(), // 商品列表数据
				 // 上拉加载配置
				 upOption: {
				   // 首次自动执行
				   auto: true,
				   // 每页数据的数量; 默认10
				   page: { size: pageSize },
				   // 数量要大于4条才显示无更多数据
				   noMoreSize: 4,
				 },
				 options1:[],
				 options2: [
				 
				 	{
				 		label: '中翻英',
				 		value: 1,
				 	},
				 	{
				 		label: '英翻中',
				 		value: 2,
				 	},
					{
						label: '听英写英',
						value: 3,
					},
					{
						label: '听英写中',
						value: 4,
					},
					{
						label: '听英写中英',
						value: 5,
					},
				 ],
				options3: [

					{
						label: '已通过',
						value: 1,
					},
					{
						label: '未通过',
						value: 2,
					},
				],
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
	this.getBookList()
		
		},

		methods: {
			
			toResult(item){
				uni.navigateTo({
					url:'/pages/ant/exam/result?paperId='+item.paper_id
				})
			},
			
			getBookList(pageNo = 1) {
				const app = this
				return new Promise((resolve, reject) => {
					BookApi.list({
							page: pageNo
						})
						.then(result => {
							// 合并新数据
							const newList = result.data.list
							app.bookList = result.data.list
							var options1=[]
						
							result.data.list.forEach(item => {
									var book={}
								book.value=item.book_id
								book.label=item.name
								options1.push(book)
								
							})
							this.options1=options1
							
						})
				})
			},
			/**
			 * 上拉加载的回调 (页面初始化时也会执行一次)
			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			 * @param {Object} page
			 */
			upCallback(page) {
			  const app = this
			  // 设置列表数据
			  app.getGoodsList(page.num)
			    .then(list => {
			      const curPageLen = list.data.length
			      const totalSize = list.data.total
			      app.mescroll.endBySize(curPageLen, totalSize)
			    })
			    .catch(() => app.mescroll.endErr())
			},
			/**
			 * 获取商品列表
			 * @param {number} pageNo 页码
			 */
			getGoodsList(pageNo = 1) {
			  const app = this
			  console.log(app.options)
			  const param = {
			    type: app.type,
			    bookId: app.bookId,
			    status: app.status,
			    keyword: app.keyword,
				startDate:app.startDate,
				endDate:app.endDate,
			    page: pageNo
			  }
			  return new Promise((resolve, reject) => {
			    PaperApi.listUser(param)
			      .then(result => {
			        // 合并新数据
			        const newList = result.data.list
			        app.list.data = getMoreListData(newList, app.list, pageNo)
			        resolve(newList)
			      })
			      .catch(reject)
			  })
			},
			search(e){
				this.keyword=e
				this.getGoodsList(1)
			},

			changeDate(e) {
				console.log(e);
				this.startDate = e.startDate
				this.endDate = e.endDate
				
				this.getGoodsList(1)
			},
			change1(e) {
				console.log(e)
				this.bookId = e
				
				this.options1.forEach(item => {
					if (item.value == e) {
						this.book_title = item.label
					}
				})
				this.getGoodsList(1)
			
			},
			change2(e) {
				console.log(e)
				this.type = e
			
				this.options2.forEach(item => {
					if (item.value == e) {
						this.type_title = item.label
					}
				})
				this.getGoodsList(1)
			
			},

			change3(e) {
				console.log(e)
				this.status = e
				
				this.options3.forEach(item => {
					if (item.value == e) {
						this.status_title = item.label
					}
				})
				this.getGoodsList(1)

			},

			next() {
				this.percent = 100
				this.num += 1
				this.duration = 10

				this.$refs.uCountDown.update();


			},

			start() {
				this.$refs.uCountDown.start();
			},
			// 事件触发，每秒一次
			change(timestamp) {
				console.log(timestamp);
				console.log(this.percent);
				this.percent = 10 * timestamp
			},



		}
	}
</script>

<style lang="scss" scoped>
	
	.search-box{
		background-color: #E1EFFF;
		height: 94rpx;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.container {
		
		width: 100%;

		background: #F5F5F5;
	}

	.col-98 {
		color: #989898;
	}

	.top {
		background-color: #FFF;
		height: 80rpx;
		line-height: 80rpx;

		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;
		border: 2rpx solid rgba(225, 239, 255, 1);

		.calendar {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 10%;

		}

		.calendar image {
			width: 32rpx;
			height: 32rpx;
		}

		.date {
			width: 40%;

		}

		.mid {
			width: 10%;
		}



	}

	.lists {

		.item {
			padding: 20rpx 0 20rpx 20rpx;
			color: #101010;
			font-size: 24rpx;
			height: 200rpx;
			width: 96%;
			margin-left: 2%;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			background-color: #FFF;

			.info {
				display: flex;
				justify-content: space-between;
			}

		}

		.status {
			width: 86rpx;
			height: 86rpx;

			background-image: url('../../../static/images/status-bg1.png');
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20rpx;
			color: #FFF;

		}
		
		.status-fail {
			width: 86rpx;
			height: 86rpx;
		
			background-image: url('../../../static/images/status-bg2.png');
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20rpx;
			color: #FFF;
		
		}

		.label1 {

			font-size: 32rpx;
			height: 46rpx;
			line-height: 46rpx;
		}

		.label {

			height: 40rpx;
			line-height: 40rpx;
		}
	}
</style>